<template>
  <div class="base">
    <el-form
      ref="loginFromRef"
      :model="data.loginFrom"
      status-icon
      :rules="rules"
      class="loginFrom"
    >
      <h3>{{ $t("login.title") }}</h3>
      <div class="login">
        <el-form-item label="账号" label-width="80px" prop="userName">
          <el-input
            v-model="data.loginFrom.userName"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
          <el-input
            v-model="data.loginFrom.password"
            :type="passwordType"
            autocomplete="off"
          ></el-input>
          <el-icon
            class="icon-eye"
            @click.stop="changType"
            v-show="passwordType !== 'password'"
          >
            <View />
          </el-icon>
          <el-icon
            class="icon-eye"
            @click.stop="changType"
            v-show="passwordType === 'password'"
          >
            <Hide />
          </el-icon>
        </el-form-item>

        <el-form-item>
          <el-button class="bntlogin" type="primary" @click="submitForm()"
            >登录</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <div class="isverify" v-if="data.isverify">
      <div class="isverify_back"></div>
      <img-check class="isverify_img" @getPosition="getPosition" :top="top" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { reactive, toRefs, watch } from "vue";
import { InitData } from "../pageJs/index";
import ImgCheck from "./ImgCheck.vue";
import { login } from "../http/api";
import { useRouter } from "vue-router";
// import type { FormInstance } from "element-plus";
const router = useRouter();
let top = 45; //需后台传过来
const getPosition = (x: number) => {
  // console.log(x, "hp");
  data.x = x;
};

const data = reactive(new InitData());
//这里对loginFromRef进行解析，确定其类型，
var { loginFromRef, passwordType } = toRefs(data);
//判断滑块是否验证成功
const success = () => {
  if (data.x <= 232 && data.x >= 223) {
    ElMessage({
      message: "验证成功!",
      type: "success",
    });
  } else {
    ElMessage.error("验证失败！");
  }
  setTimeout(() => {
    data.isverify = false;
  }, 1000);
};
watch(
  () => data.x,
  () => success()
);
const changType = () => {
  if (passwordType.value === "password") {
    passwordType.value = "text";
  } else {
    passwordType.value = "password";
  }
};
//验证器
const validatePass = (rule: any, value: any, callback: any) => {
  if (data.RegistFrom.passwordfirst !== "") {
    if (!loginFromRef.value) return;
    loginFromRef.value.validateField("checkPass", () => null);
  }
  callback();
};
const rules = {
  //校验器  对于prop
  userName: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
    {
      min: 6,
      max: 24,
      message: "长度需6-24之间",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      max: 24,
      message: "长度需6-24之间",
      trigger: "blur",
    },
    {
      validator: validatePass,
      trigger: "blur",
    },
  ],
};

const submitForm = () => {
  //提交校验
  if (!data.loginFromRef) return;
  data.loginFromRef.validate((valid) => {
    if (valid) {
      if (data.x <= 232 && data.x >= 223) {
        login(data.loginFrom).then((res) => {
          localStorage.setItem("token", res.data.token);
          router.push("/dashboard");
        });
      } else {
        data.isverify = true;
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.base {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(https://ts1.cn.mm.bing.net/th/id/R-C.fed333d09c85051bf3f34ad3d08c0e3c?rik=P0luaYf1VmEYhw&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f01847d554335ee0000019ae92f0905.jpg%401280w_1l_2o_100sh.png&ehk=A1P%2bC7%2bVYFbEltr8%2bSd2rsoLljsq%2fn3K4ew7sn2RT6Y%3d&risl=&pid=ImgRaw&r=0)
    no-repeat;
  background-size: 100% 100%;
  .loginFrom {
    position: relative;
    width: 400px;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
    h3 {
      color: #999;
      text-align: center;
      line-height: 40px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
    .login {
      padding: 20px 40px 0 10px;
      .bntlogin {
        width: 200px;
        height: 40px;
        font-size: 20px;
        margin-left: 90px;
      }
    }
  }
  .isverify {
    .isverify_back {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      background-color: black;
    }
    .isverify_img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -180px;
      margin-top: -140px;
    }
  }
}

:deep(.el-form-item__content) {
  position: relative;
}

:deep(.icon-eye) {
  position: absolute;
  top: 9px;
  right: 35px;
  color: #ccc;
}
</style>